<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JS-BOM操作 | 小马过河</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/img/manong.jpg">
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/img/mxx-152-152.png">
    <meta name="description" content="本文讲述js的BOM操作相关知识，以及浏览器的缓存和储存。">
    <meta name="keywords" content="js, js BOM, BOM操作，浏览器缓存，浏览器存储">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="theme-color" content="#ededed">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-TileImage" content="/img/mxx-144.png">
    
    <link rel="preload" href="/assets/css/0.styles.154256f1.css" as="style"><link rel="preload" href="/assets/js/app.f1a8d465.js" as="script"><link rel="preload" href="/assets/js/2.5bab2b7d.js" as="script"><link rel="preload" href="/assets/js/82.9ac0d88a.js" as="script"><link rel="prefetch" href="/assets/js/10.586b05b4.js"><link rel="prefetch" href="/assets/js/100.17640669.js"><link rel="prefetch" href="/assets/js/101.9c523894.js"><link rel="prefetch" href="/assets/js/102.27347aba.js"><link rel="prefetch" href="/assets/js/103.37a029fe.js"><link rel="prefetch" href="/assets/js/104.1d8f728c.js"><link rel="prefetch" href="/assets/js/105.8081ec6e.js"><link rel="prefetch" href="/assets/js/11.28ad280e.js"><link rel="prefetch" href="/assets/js/12.5e108f27.js"><link rel="prefetch" href="/assets/js/13.3678126c.js"><link rel="prefetch" href="/assets/js/14.505a08b7.js"><link rel="prefetch" href="/assets/js/15.8f3c0c53.js"><link rel="prefetch" href="/assets/js/16.4256e6cb.js"><link rel="prefetch" href="/assets/js/17.17d3d968.js"><link rel="prefetch" href="/assets/js/18.73488ae7.js"><link rel="prefetch" href="/assets/js/19.9d056309.js"><link rel="prefetch" href="/assets/js/20.52185694.js"><link rel="prefetch" href="/assets/js/21.3b7e8437.js"><link rel="prefetch" href="/assets/js/22.4d4d8a8b.js"><link rel="prefetch" href="/assets/js/23.dac1a360.js"><link rel="prefetch" href="/assets/js/24.798b5147.js"><link rel="prefetch" href="/assets/js/25.16d30679.js"><link rel="prefetch" href="/assets/js/26.3e5e50ab.js"><link rel="prefetch" href="/assets/js/27.99e01b84.js"><link rel="prefetch" href="/assets/js/28.86b7c539.js"><link rel="prefetch" href="/assets/js/29.ea981f89.js"><link rel="prefetch" href="/assets/js/3.c22f362a.js"><link rel="prefetch" href="/assets/js/30.6c923d43.js"><link rel="prefetch" href="/assets/js/31.df940781.js"><link rel="prefetch" href="/assets/js/32.3e5a19c7.js"><link rel="prefetch" href="/assets/js/33.0936aa71.js"><link rel="prefetch" href="/assets/js/34.566820dc.js"><link rel="prefetch" href="/assets/js/35.e263f3e4.js"><link rel="prefetch" href="/assets/js/36.32ae1d3b.js"><link rel="prefetch" href="/assets/js/37.ac0fe1ce.js"><link rel="prefetch" href="/assets/js/38.5ff1b8eb.js"><link rel="prefetch" href="/assets/js/39.da39237f.js"><link rel="prefetch" href="/assets/js/4.dca68745.js"><link rel="prefetch" href="/assets/js/40.c92cf280.js"><link rel="prefetch" href="/assets/js/41.b2318f21.js"><link rel="prefetch" href="/assets/js/42.9e98acc0.js"><link rel="prefetch" href="/assets/js/43.6a890842.js"><link rel="prefetch" href="/assets/js/44.8c501675.js"><link rel="prefetch" href="/assets/js/45.a7b73149.js"><link rel="prefetch" href="/assets/js/46.08c4dcbb.js"><link rel="prefetch" href="/assets/js/47.0fa3a317.js"><link rel="prefetch" href="/assets/js/48.15f53959.js"><link rel="prefetch" href="/assets/js/49.f9b62975.js"><link rel="prefetch" href="/assets/js/5.49ddc4eb.js"><link rel="prefetch" href="/assets/js/50.5d678fce.js"><link rel="prefetch" href="/assets/js/51.f07100da.js"><link rel="prefetch" href="/assets/js/52.25782c95.js"><link rel="prefetch" href="/assets/js/53.1151ca9a.js"><link rel="prefetch" href="/assets/js/54.86132d90.js"><link rel="prefetch" href="/assets/js/55.5e273c50.js"><link rel="prefetch" href="/assets/js/56.94d89ae7.js"><link rel="prefetch" href="/assets/js/57.ff4f6ce5.js"><link rel="prefetch" href="/assets/js/58.d6bba7bf.js"><link rel="prefetch" href="/assets/js/59.fd39aa8f.js"><link rel="prefetch" href="/assets/js/6.73ba3b93.js"><link rel="prefetch" href="/assets/js/60.3b547209.js"><link rel="prefetch" href="/assets/js/61.c2746621.js"><link rel="prefetch" href="/assets/js/62.c7246830.js"><link rel="prefetch" href="/assets/js/63.8cf018aa.js"><link rel="prefetch" href="/assets/js/64.5982f68e.js"><link rel="prefetch" href="/assets/js/65.6a323f0b.js"><link rel="prefetch" href="/assets/js/66.df6d599d.js"><link rel="prefetch" href="/assets/js/67.5c26c24c.js"><link rel="prefetch" href="/assets/js/68.e53dceea.js"><link rel="prefetch" href="/assets/js/69.65ee4851.js"><link rel="prefetch" href="/assets/js/7.541920c5.js"><link rel="prefetch" href="/assets/js/70.4bfafea4.js"><link rel="prefetch" href="/assets/js/71.b4f496a8.js"><link rel="prefetch" href="/assets/js/72.1b1ffea6.js"><link rel="prefetch" href="/assets/js/73.8929e1c4.js"><link rel="prefetch" href="/assets/js/74.d3c5fcad.js"><link rel="prefetch" href="/assets/js/75.9d01a456.js"><link rel="prefetch" href="/assets/js/76.3149b796.js"><link rel="prefetch" href="/assets/js/77.3abe6bd4.js"><link rel="prefetch" href="/assets/js/78.ae477312.js"><link rel="prefetch" href="/assets/js/79.00837d52.js"><link rel="prefetch" href="/assets/js/8.a50175f7.js"><link rel="prefetch" href="/assets/js/80.d626622b.js"><link rel="prefetch" href="/assets/js/81.ad2df06d.js"><link rel="prefetch" href="/assets/js/83.b23219b4.js"><link rel="prefetch" href="/assets/js/84.55f2741f.js"><link rel="prefetch" href="/assets/js/85.33b715e5.js"><link rel="prefetch" href="/assets/js/86.85aea4fa.js"><link rel="prefetch" href="/assets/js/87.6fd2f3fa.js"><link rel="prefetch" href="/assets/js/88.a9ea00b4.js"><link rel="prefetch" href="/assets/js/89.7e58e472.js"><link rel="prefetch" href="/assets/js/9.83acbe8c.js"><link rel="prefetch" href="/assets/js/90.e15687d5.js"><link rel="prefetch" href="/assets/js/91.026b108a.js"><link rel="prefetch" href="/assets/js/92.840afd12.js"><link rel="prefetch" href="/assets/js/93.00439ef2.js"><link rel="prefetch" href="/assets/js/94.6c994a63.js"><link rel="prefetch" href="/assets/js/95.e3dd6367.js"><link rel="prefetch" href="/assets/js/96.cbe1207c.js"><link rel="prefetch" href="/assets/js/97.34584059.js"><link rel="prefetch" href="/assets/js/98.9b2de21d.js"><link rel="prefetch" href="/assets/js/99.95d4993f.js">
    <link rel="stylesheet" href="/assets/css/0.styles.154256f1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="layout-wrapper"><!----> <div class="theme-container"><header class="navbar ele-navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/manong.jpg" alt="小马过河" class="logo"> <span class="site-name can-hide">小马过河</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><!----> <a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/nav/nav.html" class="nav-link">
  常用站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/web.html" class="nav-link">
  前端站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/afterEnd.html" class="nav-link">
  后端站点
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          CSS+HTML系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/csshtml/css-formatContent.html" class="nav-link">
  CSS格式化上下文
</a></li><li class="dropdown-subitem"><a href="/web/csshtml/css-bfc.html" class="nav-link">
  CSS的BFC
</a></li></ul></li><li class="dropdown-item"><h4>
          JS系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/js/js-prototype.html" class="nav-link">
  JS-原型与原型链
</a></li><li class="dropdown-subitem"><a href="/web/js/js-context.html" class="nav-link">
  JS-执行上下文
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue2系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/vue/mvvm.html" class="nav-link">
  Vue响应式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见面试题
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/question/css.html" class="nav-link">
  CSS面试题
</a></li><li class="dropdown-subitem"><a href="/web/question/vue.html" class="nav-link">
  Vue2.x面试题
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Java" class="dropdown-title"><span class="title">Java</span> <span class="arrow down"></span></button> <button type="button" aria-label="Java" class="mobile-dropdown-title"><span class="title">Java</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          基础系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/basics/know.html" class="nav-link">
  Java初识
</a></li><li class="dropdown-subitem"><a href="/java/basics/number.html" class="nav-link">
  Java数字
</a></li><li class="dropdown-subitem"><a href="/java/basics/string.html" class="nav-link">
  Java字符串
</a></li></ul></li><li class="dropdown-item"><h4>
          集合
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/collection/collection.html" class="nav-link">
  Collection集合
</a></li><li class="dropdown-subitem"><a href="/java/collection/list.html" class="nav-link">
  List集合
</a></li></ul></li><li class="dropdown-item"><h4>
          IO操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/io/" class="nav-link">
  IO初识
</a></li></ul></li><li class="dropdown-item"><h4>
          网络编程
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/network/ip.html" class="nav-link">
  IP操作
</a></li></ul></li><li class="dropdown-item"><h4>
          JDBC操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/jdbc/mysql-connect.html" class="nav-link">
  MySQL操作
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="数据库" class="dropdown-title"><span class="title">数据库</span> <span class="arrow down"></span></button> <button type="button" aria-label="数据库" class="mobile-dropdown-title"><span class="title">数据库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          MySQL系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/database/mysql/init.html" class="nav-link">
  常用语法
</a></li><li class="dropdown-subitem"><a href="/database/mysql/data-type.html" class="nav-link">
  数据类型
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计模式" class="dropdown-title"><span class="title">设计模式</span> <span class="arrow down"></span></button> <button type="button" aria-label="设计模式" class="mobile-dropdown-title"><span class="title">设计模式</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/designMode/observer.html" class="nav-link">
  观察者模式
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="运维/工具" class="dropdown-title"><span class="title">运维/工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="运维/工具" class="mobile-dropdown-title"><span class="title">运维/工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Maven
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/maven/" class="nav-link">
  初识
</a></li></ul></li><li class="dropdown-item"><h4>
          Tomcat
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/tomcat/" class="nav-link">
  初识
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="English" class="dropdown-title"><span class="title">English</span> <span class="arrow down"></span></button> <button type="button" aria-label="English" class="mobile-dropdown-title"><span class="title">English</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          英语读音
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/pronunciation/phonogram.html" class="nav-link">
  音标
</a></li></ul></li><li class="dropdown-item"><h4>
          英语单词
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/word/call.html" class="nav-link">
  电话
</a></li><li class="dropdown-subitem"><a href="/english/word/daily-life.html" class="nav-link">
  日常生活
</a></li><li class="dropdown-subitem"><a href="/english/word/animal.html" class="nav-link">
  动物
</a></li></ul></li><li class="dropdown-item"><h4>
          英语语法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/grammar/sentence.html" class="nav-link">
  句子成分
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Study" class="dropdown-title"><span class="title">Study</span> <span class="arrow down"></span></button> <button type="button" aria-label="Study" class="mobile-dropdown-title"><span class="title">Study</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/study/computers/" class="nav-link">
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/study/web/" class="nav-link">
  前端知识路线
</a></li><li class="dropdown-item"><!----> <a href="/study/java/" class="nav-link">
  Java知识路线
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Self" class="dropdown-title"><span class="title">Self</span> <span class="arrow down"></span></button> <button type="button" aria-label="Self" class="mobile-dropdown-title"><span class="title">Self</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/self/work/" class="nav-link">
  工作
</a></li></ul></div> <!----></div> <!----></nav> <div class="loginItem"><!----></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><!----> <a href="/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="导航" class="dropdown-title"><span class="title">导航</span> <span class="arrow down"></span></button> <button type="button" aria-label="导航" class="mobile-dropdown-title"><span class="title">导航</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/nav/nav.html" class="nav-link">
  常用站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/web.html" class="nav-link">
  前端站点
</a></li><li class="dropdown-item"><!----> <a href="/nav/afterEnd.html" class="nav-link">
  后端站点
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端" class="mobile-dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          CSS+HTML系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/csshtml/css-formatContent.html" class="nav-link">
  CSS格式化上下文
</a></li><li class="dropdown-subitem"><a href="/web/csshtml/css-bfc.html" class="nav-link">
  CSS的BFC
</a></li></ul></li><li class="dropdown-item"><h4>
          JS系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/js/js-prototype.html" class="nav-link">
  JS-原型与原型链
</a></li><li class="dropdown-subitem"><a href="/web/js/js-context.html" class="nav-link">
  JS-执行上下文
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue2系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/vue/mvvm.html" class="nav-link">
  Vue响应式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见面试题
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/question/css.html" class="nav-link">
  CSS面试题
</a></li><li class="dropdown-subitem"><a href="/web/question/vue.html" class="nav-link">
  Vue2.x面试题
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Java" class="dropdown-title"><span class="title">Java</span> <span class="arrow down"></span></button> <button type="button" aria-label="Java" class="mobile-dropdown-title"><span class="title">Java</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          基础系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/basics/know.html" class="nav-link">
  Java初识
</a></li><li class="dropdown-subitem"><a href="/java/basics/number.html" class="nav-link">
  Java数字
</a></li><li class="dropdown-subitem"><a href="/java/basics/string.html" class="nav-link">
  Java字符串
</a></li></ul></li><li class="dropdown-item"><h4>
          集合
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/collection/collection.html" class="nav-link">
  Collection集合
</a></li><li class="dropdown-subitem"><a href="/java/collection/list.html" class="nav-link">
  List集合
</a></li></ul></li><li class="dropdown-item"><h4>
          IO操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/io/" class="nav-link">
  IO初识
</a></li></ul></li><li class="dropdown-item"><h4>
          网络编程
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/network/ip.html" class="nav-link">
  IP操作
</a></li></ul></li><li class="dropdown-item"><h4>
          JDBC操作
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/java/jdbc/mysql-connect.html" class="nav-link">
  MySQL操作
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="数据库" class="dropdown-title"><span class="title">数据库</span> <span class="arrow down"></span></button> <button type="button" aria-label="数据库" class="mobile-dropdown-title"><span class="title">数据库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          MySQL系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/database/mysql/init.html" class="nav-link">
  常用语法
</a></li><li class="dropdown-subitem"><a href="/database/mysql/data-type.html" class="nav-link">
  数据类型
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="设计模式" class="dropdown-title"><span class="title">设计模式</span> <span class="arrow down"></span></button> <button type="button" aria-label="设计模式" class="mobile-dropdown-title"><span class="title">设计模式</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/designMode/observer.html" class="nav-link">
  观察者模式
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="运维/工具" class="dropdown-title"><span class="title">运维/工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="运维/工具" class="mobile-dropdown-title"><span class="title">运维/工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Maven
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/maven/" class="nav-link">
  初识
</a></li></ul></li><li class="dropdown-item"><h4>
          Tomcat
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tools/tomcat/" class="nav-link">
  初识
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="English" class="dropdown-title"><span class="title">English</span> <span class="arrow down"></span></button> <button type="button" aria-label="English" class="mobile-dropdown-title"><span class="title">English</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          英语读音
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/pronunciation/phonogram.html" class="nav-link">
  音标
</a></li></ul></li><li class="dropdown-item"><h4>
          英语单词
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/word/call.html" class="nav-link">
  电话
</a></li><li class="dropdown-subitem"><a href="/english/word/daily-life.html" class="nav-link">
  日常生活
</a></li><li class="dropdown-subitem"><a href="/english/word/animal.html" class="nav-link">
  动物
</a></li></ul></li><li class="dropdown-item"><h4>
          英语语法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/english/grammar/sentence.html" class="nav-link">
  句子成分
</a></li></ul></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Study" class="dropdown-title"><span class="title">Study</span> <span class="arrow down"></span></button> <button type="button" aria-label="Study" class="mobile-dropdown-title"><span class="title">Study</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/study/computers/" class="nav-link">
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/study/web/" class="nav-link">
  前端知识路线
</a></li><li class="dropdown-item"><!----> <a href="/study/java/" class="nav-link">
  Java知识路线
</a></li></ul></div> <!----></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Self" class="dropdown-title"><span class="title">Self</span> <span class="arrow down"></span></button> <button type="button" aria-label="Self" class="mobile-dropdown-title"><span class="title">Self</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/self/work/" class="nav-link">
  工作
</a></li></ul></div> <!----></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS+HTML系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>JS系列</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/web/js/js-bom.html" aria-current="page" class="active sidebar-link">JS-BOM操作</a></li><li><a href="/web/js/js-dom.html" class="sidebar-link">JS-DOM操作</a></li><li><a href="/web/js/js-event.html" class="sidebar-link">JS-事件</a></li><li><a href="/web/js/js-function.html" class="sidebar-link">JS-函数</a></li><li><a href="/web/js/js-prototype.html" class="sidebar-link">JS-原型与原型链</a></li><li><a href="/web/js/js-context.html" class="sidebar-link">JS-执行上下文</a></li><li><a href="/web/js/js-variable.html" class="sidebar-link">JS-变量对象</a></li><li><a href="/web/js/js-scope-chain.html" class="sidebar-link">JS-作用域和作用域链</a></li><li><a href="/web/js/js-this1.html" class="sidebar-link">JS-This（一）</a></li><li><a href="/web/js/js-this2.html" class="sidebar-link">JS-This (二)</a></li><li><a href="/web/js/js-closure.html" class="sidebar-link">JS-闭包</a></li><li><a href="/web/js/js-data-type.html" class="sidebar-link">JS-基础类型和引用类型</a></li><li><a href="/web/js/js-new.html" class="sidebar-link">JS-new操作符</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue2.x系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue3.x系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>常见面试题</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="main"><div class="content"><div class="theme-default-content content__default"><h1 id="js-bom操作"><a href="#js-bom操作" class="header-anchor">#</a> JS-BOM操作</h1> <p></p><div class="table-of-contents"><ul><li><a href="#什么是bom">什么是BOM</a><ul><li><a href="#概述">概述</a></li><li><a href="#核心-window-对象">核心 window 对象</a></li></ul></li><li><a href="#bom操作api">BOM操作API</a><ul><li><a href="#window对象">window对象</a></li><li><a href="#document-对象">document 对象</a></li><li><a href="#location对象">location对象</a></li><li><a href="#navigator对象">navigator对象</a></li><li><a href="#screen对象">screen对象</a></li></ul></li><li><a href="#定时器">定时器</a><ul><li><a href="#settimeout">setTimeout</a></li><li><a href="#setinterval">setInterval</a></li><li><a href="#requestanimationframe">requestAnimationFrame</a></li></ul></li></ul></div><p></p> <p>🐴</p> <h2 id="什么是bom"><a href="#什么是bom" class="header-anchor">#</a> 什么是BOM</h2> <h3 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h3> <p>浏览器对象模型（Browser Object Model (BOM)）是JavaScript的组成之一，他提供了独立与内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。</p> <h3 id="核心-window-对象"><a href="#核心-window-对象" class="header-anchor">#</a> 核心 window 对象</h3> <p>BOM 的核心对象是 window ，它表示浏览器的一个实例。在浏览器中， window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。</p> <ul><li><p>通过window可以操作整个浏览器。</p></li> <li><p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p></li> <li><p>所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。</p></li> <li><p>全局变量是 window 对象的属性。</p></li> <li><p>全局函数是 window 对象的方法。</p></li> <li><p>甚至 HTML DOM 的 document 也是 window 对象的属性之一：</p></li></ul> <p>BOM 和 DOM 的关系可以用下图表示</p> <p><img src="http://www.itxueyuan.org/uploads/allimg/121112/1-121112154254459.png" alt="BOM图谱"></p> <h2 id="bom操作api"><a href="#bom操作api" class="header-anchor">#</a> BOM操作API</h2> <h3 id="window对象"><a href="#window对象" class="header-anchor">#</a> window对象</h3> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//关闭窗口  </span>

window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;message&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//弹出一个具有OK按钮的系统消息框，显示指定的文本 </span>

window<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">&quot;Are you sure?&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值  </span>

window<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">&quot;What's your name?&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Default&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回  </span>

window<span class="token punctuation">.</span>status  <span class="token comment">//可以使状态栏的文本暂时改变  </span>

window<span class="token punctuation">.</span>defaultStatus  <span class="token comment">//默认的状态栏信息，可在用户离开当前页面前一直改变文本  </span>

window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>  <span class="token comment">//设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数  </span>

window<span class="token punctuation">.</span><span class="token function">clearTimeout</span><span class="token punctuation">(</span><span class="token string">&quot;ID&quot;</span><span class="token punctuation">)</span>  <span class="token comment">//取消还未执行的暂停，将暂停ID传递给它  </span>

window<span class="token punctuation">.</span><span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>  <span class="token comment">//无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()一样  </span>

window<span class="token punctuation">.</span><span class="token function">clearInterval</span><span class="token punctuation">(</span><span class="token string">&quot;ID&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//取消时间间隔，将间隔ID传递给它  </span>

window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//访问浏览器窗口的历史，负数为后退，正数为前进 </span>

window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//访问浏览器窗口的历史，负数为后退，正数为前进 </span>

window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//访问浏览器窗口的历史，负数为后退，正数为前进 </span>

window<span class="token punctuation">.</span>history<span class="token punctuation">.</span>length  <span class="token comment">//可以查看历史中的页面数   </span>

</code></pre></div><h3 id="document-对象"><a href="#document-对象" class="header-anchor">#</a> document 对象</h3> <div class="language-JavaScript extra-class"><pre class="language-javascript"><code>
document对象：实际上是window对象的属性，document <span class="token operator">==</span> window<span class="token punctuation">.</span>document为<span class="token boolean">true</span>，是唯一一个既属于<span class="token constant">BOM</span>又属于<span class="token constant">DOM</span>的对象  

document<span class="token punctuation">.</span>lastModified  <span class="token comment">//获取最后一次修改html文档的日期的字符串表示  </span>

document<span class="token punctuation">.</span>referrer  <span class="token comment">//用于跟踪用户从哪里链接过来的  </span>

document<span class="token punctuation">.</span>title  <span class="token comment">//获取当前页面的标题，可读写  </span>

document<span class="token punctuation">.</span><span class="token constant">URL</span>  <span class="token comment">//获取当前页面的URL，可读写  </span>

document<span class="token punctuation">.</span>anchors<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>或document<span class="token punctuation">.</span>anchors<span class="token punctuation">[</span><span class="token string">&quot;anchName&quot;</span><span class="token punctuation">]</span> <span class="token comment">//访问页面中所有的锚  </span>

document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>或document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token string">&quot;formName&quot;</span><span class="token punctuation">]</span>  <span class="token comment">//访问页面中所有的表单  </span>

document<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>或document<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token string">&quot;imgName&quot;</span><span class="token punctuation">]</span>  <span class="token comment">// 访问页面中所有的图像  </span>

document<span class="token punctuation">.</span>links <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>或document<span class="token punctuation">.</span>links<span class="token punctuation">[</span><span class="token string">&quot;linkName&quot;</span><span class="token punctuation">]</span>  <span class="token comment">//访问页面中所有的链接 </span>

document<span class="token punctuation">.</span>applets <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>或document<span class="token punctuation">.</span>applets<span class="token punctuation">[</span><span class="token string">&quot;appletName&quot;</span><span class="token punctuation">]</span>  <span class="token comment">//访问页面中所有的Applet  </span>

document<span class="token punctuation">.</span>embeds <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>或document<span class="token punctuation">.</span>embeds<span class="token punctuation">[</span><span class="token string">&quot;embedName&quot;</span><span class="token punctuation">]</span>  <span class="token comment">//访问页面中所有的嵌入式对象  </span>

document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 或document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//将字符串插入到调用它们的位置  </span>

</code></pre></div><h3 id="location对象"><a href="#location对象" class="header-anchor">#</a> location对象</h3> <div class="language-JavaScript extra-class"><pre class="language-javascript"><code>
location对象：表示载入窗口的<span class="token constant">URL</span>，也可用window<span class="token punctuation">.</span>location引用它  

location<span class="token punctuation">.</span>href  <span class="token comment">//当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm  </span>

location<span class="token punctuation">.</span>portocol  <span class="token comment">//URL中使用的协议，即双斜杠之前的部分，如http </span>

location<span class="token punctuation">.</span>host  <span class="token comment">//服务器的名字，如www.wrox.com  </span>

location<span class="token punctuation">.</span>hostname  <span class="token comment">//通常等于host，有时会省略前面的www  </span>

location<span class="token punctuation">.</span>port  <span class="token comment">//URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080 </span>

location<span class="token punctuation">.</span>pathname  <span class="token comment">//URL中主机名后的部分，如/pictures/index.htm  </span>

location<span class="token punctuation">.</span>search  <span class="token comment">//执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx  </span>

location<span class="token punctuation">.</span>hash  <span class="token comment">//如果URL包含#，返回该符号之后的内容，如#anchor1  </span>

location<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token string">&quot;http:www.baidu.com&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//同location.href，新地址都会被加到浏览器的历史栈中  </span>

location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&quot;http:www.baidu.com&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问  </span>

location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">|</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false  </span>
</code></pre></div><h3 id="navigator对象"><a href="#navigator对象" class="header-anchor">#</a> navigator对象</h3> <p><code>navigator</code> 对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可用window.navigator引用它</p> <div class="language-JavaScript extra-class"><pre class="language-javascript"><code>
navigator<span class="token punctuation">.</span>appCodeName  <span class="token comment">//浏览器代码名的字符串表示  </span>

navigator<span class="token punctuation">.</span>appName  <span class="token comment">//官方浏览器名的字符串表示  </span>

navigator<span class="token punctuation">.</span>appVersion  <span class="token comment">//浏览器版本信息的字符串表示  </span>

navigator<span class="token punctuation">.</span>cookieEnabled  <span class="token comment">//如果启用cookie返回true，否则返回false  </span>

navigator<span class="token punctuation">.</span>javaEnabled  <span class="token comment">//如果启用java返回true，否则返回false  </span>

navigator<span class="token punctuation">.</span>platform  <span class="token comment">//浏览器所在计算机平台的字符串表示  </span>

navigator<span class="token punctuation">.</span>plugins  <span class="token comment">//安装在浏览器中的插件数组  </span>

navigator<span class="token punctuation">.</span>taintEnabled  <span class="token comment">//如果启用了数据污点返回true，否则返回false  </span>

navigator<span class="token punctuation">.</span>userAgent  <span class="token comment">//用户代理头的字符串表示   </span>

</code></pre></div><p>我们经常使用navigator对象来判断平台的类型，比如:</p> <div class="language-JavaScript extra-class"><pre class="language-javascript"><code>
<span class="token keyword">var</span> u <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">;</span>

<span class="token keyword">var</span> isAndroid <span class="token operator">=</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Android'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">||</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Adr'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//android终端</span>
<span class="token keyword">var</span> isiOS <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span>u<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\(i[^;]+;( U;)? CPU.+Mac OS X</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//ios终端</span>

<span class="token keyword">var</span> isMobile <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span>u<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">AppleWebKit.*Mobile.*</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span> <span class="token comment">//是否为移动终端</span>
<span class="token keyword">var</span> isIpad <span class="token operator">=</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'iPad'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token comment">//是否iPad</span>
<span class="token keyword">var</span> isWecath <span class="token operator">=</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'MicroMessenger'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token comment">//是否微信 </span>
<span class="token keyword">var</span> isIE <span class="token operator">=</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Trident'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token comment">//IE内核</span>
<span class="token keyword">var</span> isWebkit <span class="token operator">=</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'AppleWebKit'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token comment">//苹果、谷歌内核</span>
<span class="token keyword">var</span> isFireFox <span class="token operator">=</span>  u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Gecko'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'KHTML'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token comment">//火狐内核</span>
<span class="token keyword">var</span> isOpera <span class="token operator">=</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Presto'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token comment">//opera内核</span>
</code></pre></div><h3 id="screen对象"><a href="#screen对象" class="header-anchor">#</a> screen对象</h3> <p><code>screen</code>对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它</p> <div class="language-JavaScript extra-class"><pre class="language-javascript"><code>
screen<span class="token punctuation">.</span>width<span class="token operator">/</span>height  <span class="token comment">//屏幕的宽度与高度，以像素计  </span>

screen<span class="token punctuation">.</span>availWidth<span class="token operator">/</span>availHeight  <span class="token comment">//窗口可以使用的屏幕的宽度和高度，以像素计 </span>

screen<span class="token punctuation">.</span>colorDepth  <span class="token comment">//用户表示颜色的位数，大多数系统采用32位  </span>

window<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//控制浏览器滚动条的位置</span>

window<span class="token punctuation">.</span><span class="token function">resizeTo</span><span class="token punctuation">(</span>screen<span class="token punctuation">.</span>availWidth<span class="token punctuation">,</span> screen<span class="token punctuation">.</span>availHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//填充用户的屏幕   </span>

</code></pre></div><h2 id="定时器"><a href="#定时器" class="header-anchor">#</a> 定时器</h2> <h3 id="settimeout"><a href="#settimeout" class="header-anchor">#</a> setTimeout</h3> <p><code>setTimeout()</code>应该都很熟悉，它是当页面代码执行完毕后立即开始定时的，而且只定时一次，并返回一个定时器的<code>id</code>，可以使用<code>clearTimeout()</code>来取消这次定时器</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 100毫秒后执行一次</span>
<span class="token keyword">let</span> timeID <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
　　 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1111</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="setinterval"><a href="#setinterval" class="header-anchor">#</a> setInterval</h3> <p><code>setTimeout()</code>应该也不陌生，它是当页面代码执行完毕后立即开始定时的，而且根据设定的时间来循环执行，并返回一个定时器的id，可以使用<code>clearTimeout()</code>来取消这次定时器</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 每一100毫秒执行一次</span>
<span class="token keyword">let</span> timeID <span class="token operator">=</span> <span class="token function">setInerval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
　　 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1111</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">注意</p> <p>可以使用<code>setTimeout</code>来完成<code>setInterval</code>的工作，这样做的好处是，<code>setTimeout保证了每次执行完当前函数中的操作再进行下一次定时任务，而</code>setInterval`不会保证上一次任务执行完毕再添加下一次任务。</p></div> <h3 id="requestanimationframe"><a href="#requestanimationframe" class="header-anchor">#</a> requestAnimationFrame</h3> <ul><li><a href="https://caniuse.com/#search=requestAnimationFrame" target="_blank" rel="noopener noreferrer">查看兼容性<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>requestAnimationFrame() 定时器是根据显示器的帧来定时的，也就是显示屏每刷新一帧，它就执行一次。和上边两个定时器一样，它也会返回一个句柄，并使用<code>cancelAnimationFrame()</code>来清楚它。　它使用方法如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  Aframe <span class="token operator">=</span> <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>animate<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// Do something animate</span>
<span class="token punctuation">}</span>

Aframe <span class="token operator">=</span> <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>animate<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 如果清除使用　cancelAnimationFrame(Aframe)</span>
</code></pre></div><p><code>equestAnimationFrame</code>的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，<code>requestAnimationFrame</code>的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。</p> <p>不过有一点需要注意，<code>requestAnimationFrame</code>是在主线程上完成。这意味着，如果主线程非常繁忙，<code>requestAnimationFrame</code>的动画效果会大打折扣。</p> <p><strong>处理兼容</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span>requestAnimationFrame <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span>  window<span class="token punctuation">.</span>requestAnimationFrame       <span class="token operator">||</span>
          window<span class="token punctuation">.</span>webkitRequestAnimationFrame <span class="token operator">||</span>
          window<span class="token punctuation">.</span>mozRequestAnimationFrame    <span class="token operator">||</span>
          <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">callback</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最近更新时间:</span> <span class="time">7/2/2021, 11:27:27 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/web/csshtml/css-bfc.html" class="prev">
        CSS-BFC
      </a></span> <span class="next"><a href="/web/js/js-dom.html">
        JS-DOM操作
      </a>
      →
    </span></p></div></div> <div class="floatSilder hidden-sm-and-down"><div class="floatSilderWrapper" data-v-4100c7a9><div class="topTitle" data-v-4100c7a9>JS-BOM操作</div> <div class="contentNav" data-v-4100c7a9><ul class="nav" data-v-4100c7a9><li class="title" data-v-4100c7a9><a href="#什么是bom" data-v-4100c7a9>什么是BOM</a></li><li class="subTitle" data-v-4100c7a9><a href="#概述" data-v-4100c7a9>概述</a></li><li class="subTitle" data-v-4100c7a9><a href="#核心-window-对象" data-v-4100c7a9>核心 window 对象</a></li><li class="title" data-v-4100c7a9><a href="#bom操作api" data-v-4100c7a9>BOM操作API</a></li><li class="subTitle" data-v-4100c7a9><a href="#window对象" data-v-4100c7a9>window对象</a></li><li class="subTitle" data-v-4100c7a9><a href="#document-对象" data-v-4100c7a9>document 对象</a></li><li class="subTitle" data-v-4100c7a9><a href="#location对象" data-v-4100c7a9>location对象</a></li><li class="subTitle" data-v-4100c7a9><a href="#navigator对象" data-v-4100c7a9>navigator对象</a></li><li class="subTitle" data-v-4100c7a9><a href="#screen对象" data-v-4100c7a9>screen对象</a></li><li class="title" data-v-4100c7a9><a href="#定时器" data-v-4100c7a9>定时器</a></li><li class="subTitle" data-v-4100c7a9><a href="#settimeout" data-v-4100c7a9>setTimeout</a></li><li class="subTitle" data-v-4100c7a9><a href="#setinterval" data-v-4100c7a9>setInterval</a></li><li class="subTitle" data-v-4100c7a9><a href="#requestanimationframe" data-v-4100c7a9>requestAnimationFrame</a></li></ul></div></div></div></div> </main></div></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.f1a8d465.js" defer></script><script src="/assets/js/2.5bab2b7d.js" defer></script><script src="/assets/js/82.9ac0d88a.js" defer></script>
  </body>
</html>
